import React, { useEffect, useState, useRef } from 'react';
import { fetchListUserAddress, fakeSetDefault } from '@/server/shop';
import Taro from "@tarojs/taro";
import MaskSetAddress from '../MaskSetAddress';
import { Space } from '@/components/UiComponents'
import { View, Text, Input, Button, Checkbox } from '@tarojs/components'
import { AtForm, AtInput, AtButton, AtSwitch, AtFloatLayout, AtList, AtListItem } from 'taro-ui'
import "taro-ui/dist/style/components/float-layout.scss";
import './index.scss'
const Card = (props) => {
    const { data, setAddressObj, onClose, detail = {}, handleCallback, setMaskVsible } = props
    const { id, receiveUsername, cityName, districtName, provinceName, address } = data
    const setDefault = () => {
        fakeSetDefault({ id }).then(val => {
            handleCallback()
        })
    }
    return <View style={{ borderBottom: '1px solid #eeeeee' }} onClick={() => {
        setAddressObj(data)
        onClose()
    }}>
        <View style={{ justifyContent: 'flex-start' }} className='address-wrapper'>
            <Checkbox checked={id === detail.id}></Checkbox>
            <View className='left-info'>
                <View className='top-text'>{
                    receiveUsername
                }</View>
                <View className='address-text'>{provinceName + cityName + districtName + address}</View>

            </View>
            <View className='edit-icon'>
                <Space style={{ '--gap': '24px' }} align={'center'}>
                    {data.defaultFlag !== '1' && <View className='default_btn' onClick={(e) => {
                        e.stopPropagation()
                        setDefault()

                    }} color='primary'>
                        设为默认
                    </View>}
                    <View onClick={(e) => {
                        e.stopPropagation()
                        setMaskVsible({
                            show: true,
                            detail: data
                        })
                    }} style={{ fontSize: Taro.pxTransform(42) }} className="at-icon at-icon-edit"
                    ></View>
                </Space>

            </View>
        </View>
    </View>
}
const MaskAddress = (props) => {
    const { visible = {}, onClose, dispatch, setAddressObj } = props
    const { show = false, detail = {} } = visible
    const [maskVisible, setMaskVsible] = useState(false)
    const [list, setList] = useState([])
    const fetchAddress = () => {
        fetchListUserAddress({ page: 1, limit: 99 }).then(val => {
            const { userAddressList } = val
            setList(userAddressList)
        })
    }
    useEffect(() => {
        if (show) {
            fetchAddress()
        }
        else {

        }
    }, [show])
    return <AtFloatLayout
        title={'选择地址'}
        onClose={() => onClose()}
        isOpened={show}>
        <View className='MaskAddress_box'>
            {list.map((item, val) => {
                return <Card handleCallback={fetchAddress} setMaskVsible={setMaskVsible} setAddressObj={setAddressObj} onClose={onClose} detail={detail} data={item} key={val}></Card>
            })}


        </View>
        <Button className='MaskAddress_add_btn' onClick={() => {
            setMaskVsible({
                show: true
            })
        }} block color='primary' size='large'>
            新增地址
        </Button>

        {maskVisible && <MaskSetAddress handleCallback={fetchAddress} visibleMask={maskVisible} onClose={() => { setMaskVsible(false) }}></MaskSetAddress>}
    </AtFloatLayout>
}
export default MaskAddress

